<!--
 * @Author: Igris
 * @Date: 2024-07-01 10:10:26
 * @LastEditors: chenw chenw@qq.com
 * @LastEditTime: 2024-07-09 14:18:09
 * @Description:封装表格组件
-->
<template>
  <div class="basic-table-wrapper">
    <el-table
      :data="tableData"
      style="width: 100%"
      highlight-current-row
      height="100%"
      class="base-table"
      :cellStyle="cellStyle"
      :table-layout="layout"
      :header-cell-style="headerCellStyle"
      @selection-change="handleSelectionChange"
      show-overflow-tooltip>
      <el-table-column
        v-if="showSelection"
        type="selection"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        v-for="item in tableConfigs"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :align="item.align"
        :min-width="item['min-width']"
        :max-width="item['max-width']"
        :key="item.prop"
        :fixed="item.prop === 'handle' ? 'right' : false">
        <template #header>
          <slot :name="'header_' + item.prop" :label="item.label">
            {{ item.label }}
          </slot>
        </template>

        <template #default="scope">
          <slot
            :name="item.prop"
            :row="scope.row"
            v-if="item.prop !== 'handle'">
            {{ scope.row[item.prop] || '-' }}
          </slot>

          <slot name="handle" :row="scope.row" v-else> </slot>
        </template>
      </el-table-column>
    </el-table>

    <div class="page" v-if="total">
      <el-pagination
        background
        layout="prev, pager, next, total"
        :total="total"
        :page-size="pageSize"
        v-model:current-page="model"
        small
        hide-on-single-page
        @current-change="emit('handlePageChange', $event)">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts" setup generic="T extends Record<string, unknown>">
  import type { BasicTablePropsType } from './types/table'
  defineOptions({ name: 'BasicTable' })
  withDefaults(defineProps<BasicTablePropsType<T>>(), {
    showIndex: false,
    showSelection: false,

    tableConfigs: () => [],
    tableData: (): T[] => [],

    total: 0,
    pageSize: 20,
    page: 1,

    layout: 'fixed',
    isHandleFixed: false
  })

  const emit = defineEmits(['selectionChange', 'handlePageChange'])
  const handleSelectionChange = (event: any) => {
    emit('selectionChange', event)
  }

  const model = defineModel('page')
</script>

<style scoped lang="scss">
  .basic-table-wrapper {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .base-table {
      flex: 1;
    }
    .page {
      margin-top: 10px;
      display: flex;
      justify-content: end;
    }
  }
</style>
